<template>
  <div>
      <h4>产品列表</h4>
      <ul>
          <li v-for="(item, index) in endmsg" :key="index" :class="{ active: item.active }" @click="change(item,index)">
              {{item.title}}
              {{item.name}}
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  // mark 表示当前item的名称,curr,表示选中的菜单名称
  props: ["endmsg"],
    data() {
      return{
          active:false,
      } 
  },
  methods: {
    change(item,index) {
      // console.log("点击菜单", this.mark);
      // this.$emit("change", this.mark);
      this.endmsg.forEach(ele=>{
        console.log(ele);
        ele.active=false
      });
      item.active =true
    },
  },
};
</script>

<style scope>
  li{
    
    list-style: none;
    line-height: 30px;
    background-color: pink;
    margin: 5px;
  }
  .active{
    background-color: green;
  }
</style>